<template>
  <div class="shop">
    <table>
      <tr v-for="(item,index) in shop" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>
          <button @click="addNum(index)">+</button>
          <span>{{item.num}}</span>
          <button @click="minusNum(index)">-</button>
        </td>
        <td>{{item.num * item.price}}</td>
      </tr>
    </table>
    <h1>你一共需要支付{{total}}元</h1>
  </div>
</template>

<script>
export default {
    //接受父组件传递数据
    props:{
        //对象的写法-当然数组也可以
        shop:{
          //数据类型
          type:Array,
          //默认初始值
          default:[]
        },
        addNum:{
            type:Function,
        },
        minusNum:{
            type:Function
        }
    },
    computed:{
        total(){
            //遍历shop数组
            let sum = 0;
            this.shop.forEach(item=>{
                 sum +=item.num * item.price;
            });
            return sum;
        }
    }
};
</script>

<style scoped lang="less">
.shop {
  width: 600px;
  height: 400px;
  background: yellowgreen;
  margin: 50px auto;
  table,
  tr,
  td {
    border: 1px solid white;
    border-collapse: collapse;
  }
  table {
    width: 100%;
  }
  td {
    width: 20%;
    height: 50px;
    text-align: center;
  }
}


button{
    width: 15px;
    height: 15px;
}
</style>